<template>
  <div class="box-bd clearfix">
    <div class="row">
      <div class="span4">
        <ul class="brick-promo-list clearfix">
          <li class="brick-item brick-item-l">
            <a href="https://www.mi.com/mixalpha" target="_blank">
              <img src="../../../assets/imgs/left.png" alt="">
            </a>
          </li>
        </ul>
      </div>
      <div class="span16">
        <ul class="brick-list clearfix">
          <li class="brick-item brick-item-m brick-item-m-2" v-for="i in 8" :key="i">
            <a href="https://www.mi.com/buy/detail?product_id=12609" target="_blank">
              <div class="figure figure-img">
                <img src="../../../assets/imgs/J9-blue.png" alt="小米10 至尊版" width="160" height="160">
              </div>
              <h3 class="title">小米10 至尊版</h3>
              <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p>
              <p class="price">
                <span class="num">5299</span>元<span>起</span>
              </p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.row{
  margin-left: -14px;
}
.span4{
  width: 234px;
}
.brick-promo-list,.brick-list {
  margin: 0 0 -14px -14px;
  height: 614px;
  padding: 0;
  list-style-type: none;
  .brick-item-l {
    height: 614px;
    img{
      height: 614px;
      width: 234px;
    }
  }
  .brick-item{
    position: relative;
    z-index: 1;
    float: left;
    width: 234px;
    margin-left: 14px;
    margin-bottom: 14px;
    background: #fff;
    // -webkit-transition: all .2s linear;
    // transition: all .2s linear;
  }
  a{
    display: block;
    width: 100%;
    height: 100%;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
  }
  .brick-item-l a:hover{
    z-index: 2;
    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}


.span16{
  width: 978px;
}
.home-brick-box .brick-list {
  width: 992px;
  .brick-item {
    position: relative;
    z-index: 1;
    float: left;
    width: 234px;
    margin-left: 14px;
    margin-bottom: 14px;
    background: #fff;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
  }
  .brick-item:hover{
    z-index: 2;
    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
  .brick-item-m-2{
    height: 260px;
    padding: 20px 0;
    .figure-img {
      width: 150px;
      height: 150px;
      margin: 0 auto 18px;
    }
    .title,.desc{
      margin: 0 10px 2px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .title{
      font-size: 14px;
      font-weight: 400;
      color: #333
    }
    .desc{
      margin: 0 10px 10px;
      height: 18px;
      font-size: 12px;
      color: #b0b0b0;
    }
    .price{
      margin: 0 10px 14px;
      text-align: center;
      color: #ff6700;
    }
  }
}
</style>